// 铺满父容器
@mixin overspread {
    width: 100%;
    height: 100%;
}

@mixin set-size($width: 100%, $height: 100%) {
    width: $width;
    height: $height;
}

// 设置元素点击背景色变化
@mixin click-style($hover-bgcolor, $active-bgcolor, $transition: 0.2s) {
    transition: $transition;

    &:hover {
        background-color: $hover-bgcolor;
    }

    &:active {
        background-color: $active-bgcolor;
    }
}

// 利用投影给图片着色 (父容器必须设置overflow:hidden, 否则会出现两个图)
@mixin img-dye($color, $offset: 80px, $important: false) {
    @if $important {
        filter: drop-shadow(-$offset 0 $color) !important;
    } @else {
        filter: drop-shadow(-$offset 0 $color);
    }

    transform: translate($offset);
}

@mixin list-animation($duration: 0.5s, $translateX: 50px) {
    .list-move,
    .list-enter-active,
    .list-leave-active {
        transition: all $duration ease;
    }

    .list-enter-from,
    .list-leave-to {
        opacity: 0;
        transform: translateX($translateX);
    }

    .list-leave-active {
        position: absolute;
    }
}

@mixin set-border($color, $width) {
    // 这里使用box-shadow代替border, 防止影响到布局
    box-shadow: 0 0 0 2px v-bind(borderColor);
}
